<template>
  <div>
    <el-table :data="tableData" border style="width: 100%" class="list">
      <el-table-column prop="id" label="特产id" width="70"></el-table-column>
      <el-table-column prop="name" label="特产名字" width="150"></el-table-column>
      <el-table-column prop="description" label="特产描述" width="120"></el-table-column>
      <el-table-column prop="main_img" label="封面图" width="230">
        <template slot-scope="scope">
          <el-image style="width: 200px; height: 100px" :src="scope.row.main_img"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="stars" label="评分" width="100"></el-table-column>
      <el-table-column prop="price" label="原价"></el-table-column>
      <el-table-column prop="price_discount" label="折后价" width="70"></el-table-column>
      <el-table-column prop="stock" label="库存" width="70"></el-table-column>
      <el-table-column prop="sort" label="排序" width="70"></el-table-column>
      <el-table-column prop="status" label="状态" width="70"></el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button size="small" @click="$emit('change',scope.$index)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          <el-button size="small" type="primary" @click="$emit('toPhotoList',scope.row)">图片</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "productList",
  props: ["productList"],
  computed: {
    tableData: function() {
      return this.productList.filter((item, index) => {
        if (item.status == 1) {
          item.status = "正常";
        } else if (item.status == 0) {
          item.status == "停用";
        }
        item.index = index;
        return true;
      });
    }
  },
  methods: {
    handleEdit(index, row) {
      alert(index, row);
    },
    handleDelete(attrObj) {
      let isDel = false;
      this.$confirm(`确认删除"${attrObj.name}"的数据吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        beforeClose: async (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            let data = await this._axios.post("/api/product/del", {
              id: attrObj.id
            });
            instance.confirmButtonLoading = false;
            if (data.data.code) {
              isDel = true;
              done();
            } else {
              done();
            }
          } else {
            done();
          }
        }
      })
        .then(() => {
          if (isDel) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.$emit("refresh");
          } else {
            this.$message({
              type: "error",
              message: "删除失败!"
            });
          }
          // this.$emit("refresh");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style lang="scss" scopted>
.list {
  height: 70vh;
  overflow-y: scroll;
  &::before {
    display: none;
  }
}
</style>